<template>
	<div class="flex_row mt5" v-if="form != null">
		<el-form>
			<el-form-item label="设备名称">
				<el-input v-model="form.name" clearable />
			</el-form-item>
			<el-form-item label="Mac地址">
				<el-input v-model="form.mac_addr" clearable />
			</el-form-item>
			<el-form-item label="放置位置">
				<el-input v-model="form.location" clearable />
			</el-form-item>
			<el-form-item label="货币代码">
				<el-select v-model="form.currency_code">
					<el-option v-for="(item, index) in CURRENCY_CODES" :key="index" :label="item" :value="item" />
				</el-select>
			</el-form-item>
			<el-form-item label="设备语言">
				<el-select v-model="form.lang">
					<el-option v-for="(item, index) in LANGS" :key="index" :label="item" :value="item" />
				</el-select>
			</el-form-item>
			<el-form-item label="钱币倍率">
				<el-select v-model="form.money">
					<el-option v-for="(item, index) in MONEYS" :key="index" :label="item" :value="item" />
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="onEidt">修改</el-button>
			</el-form-item>
		</el-form>
	</div>
	<div v-if="form == null" class="mt5">
		没有选择设备
	</div>
</template>

<script lang="ts" setup>
import { CURRENCY_CODES, LANGS, MONEYS, type Device } from '@/service/model';
import { editAndUpdate, selectDevice } from '@/service/react';
import { runAction } from '@/utils/ui';
import { ref, watch } from 'vue';

const form = ref<Device | null>(null)

if (selectDevice.value != null) {
	form.value = {
		...selectDevice.value
	}
}

async function onEidt() {
	if (form == null) {
			return;	
	}
	const device = form.value!!;
	runAction('修改', '修改', async () => {
		await editAndUpdate(device);
	});
}

watch(selectDevice, () => {
	if (selectDevice.value != null) {
		form.value = {
			...selectDevice.value
		}
	}
})

</script>
